<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<title>微分销--微信支付页</title>
        <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css" />
</head>

	<body>

		<!--页面顶部白条条，由js动态加载-->
		<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
		<div class="top"></div>
    	<script type="text/javascript">$(".top").load("shortcut.html");</script>

		<div class="cart py-container" id="payVm">
			<!--logoArea-->
			<div class="logoArea">
				<div class="fl logo"><span class="title">收银台</span></div>
			</div>
			<!--主内容-->

			<a href="payfail.html">支付失败演示页</a>
			<a href="paysuccess.html">支付成功演示页</a>


			<div class="checkout py-container  pay">
				<div class="checkout-tit">
					<h4 class="fl tit-txt"><span class="success-icon"></span><span  class="success-info">订单提交成功，请您及时付款！订单号：{{result.orderId}}</span></h4>
                    <span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money">￥{{result.total_fee/100}}</em>元</span>
					<div class="clearfix"></div>
				</div>
				<div class="checkout-steps">
					<div class="fl weixin">微信支付</div>
                    <div class="fl sao">
                        <p class="red">二维码已过期，刷新页面重新获取二维码。</p>
                        <div class="fl code">
                            <div id="qrImage"></div>
                            <div class="saosao">
                                <p>请使用微信扫一扫</p>
                                <p>扫描二维码支付</p>
                            </div>
                        </div>
                        <div class="fl phone">

                        </div>

                    </div>
                    <div class="clearfix"></div>
				    <p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
				</div>
			</div>

		</div>


	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->


<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript">
			$(function(){
				$("ul.payType li").click(function(){
					$(this).css("border","2px solid #E4393C").siblings().css("border-color","#ddd");
				})
			})
		</script>
<!--客户端的websocket脚本依赖-->		
<script src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>

<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/qrcode.min.js"></script>
<script type="text/javascript">

var vm = new Vue({
	el:"#payVm",
	data:{
		result:{},
		orderId:"",
	},
	methods: {
		openSocket() {
                if(typeof(WebSocket) == "undefined") {
                    console.log("您的浏览器不支持WebSocket");
                }else{
					console.log("ddd ");
                    console.log("您的浏览器支持WebSocket");
                    //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
                    var socketUrl="ws://192.168.53.68:8012/homestayPay/websocket/"+this.orderId;
                    if(this.socket!=null){
                        this.socket.close();
                        this.socket=null;
                    }
                    //初始化websocket实例对象
                    this.socket = new WebSocket(socketUrl);
                    //打开事件
                    this.socket.onopen = function() {
                        console.log("websocket已打开");
                    };
                    //获得消息事件
                    this.socket.onmessage = function(msg) {
                        //服务端回传的消息
						console.log("111"+msg);
                        console.log(msg.data);
						//如果支付成功
						if(msg.data =="success"){
							console.log("sdssdsss")
					
							location.href = "./success.html"
							this.socket.close()
						}
                    };
                    //关闭事件
                    this.socket.onclose = function() {
                        console.log("websocket已关闭");
                    };
                    //发生了错误事件
                    this.socket.onerror = function() {
                        console.log("websocket发生了错误");
                    }
                }
	}
},
	created() {
		
		//校验用户已是否登录
		wfx.http.get("/check").then(res=>{
			if(!res.success){
				location.href = "http://passport.wfx.com/login.html?redirect="+location.href	
			}
		})
		
		
		//获取订单id
		var params = wfx.urlToObj(location.href)

		var ids = params.orderId;

		//与服务端建立websocket连接
		this.orderId = ids;
		this.openSocket()


		

		if(ids){
			//调用支付微服务，去微信支付系统，下单，返回支付二维码
			wfx.http.get("homestayPay/pay/order?orderId="+ids).then(res=>{
				if(res.success){
					this.result = res.data
					console.log(this.result)
					//生成支付二维码
					var qrcode = new QRCode("qrImage", {
						text: res.data.payUrl,
						width: 256,
						height: 256,
						colorDark : "#000000",
						colorLight : "#ffffff",
						correctLevel : QRCode.CorrectLevel.H
					});


				}
			})
		}

	},
})
	
</script>
</body>

</html>
